<template>
    <div class="fir-header">
        <div class="title">
            <img src="../../assets/home/logo.png">
        </div>
        <el-dropdown class="fr" @command="handleCommand" trigger="click">
            <div class="user">
                <span>{{username}}</span>
                <img src="../../assets/home/select.png">
            </div>
            <el-dropdown-menu class="user-change user-change-hide" slot="dropdown">
                <el-dropdown-item command="alertmm">修改密码</el-dropdown-item>
                <el-dropdown-item command="loginout">退出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
		<div class="header-alert" v-show="mmshow">
			<div class="header-alert-bd">
				<div class="header-title">
					<span>修改密码</span>
					<span class="el-icon-close header-title-close"
						  @click="mmshow = false"></span>
				</div>
				<div class="header-content">
					<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
						<el-form-item label="旧密码"  prop="oldpass">
							<el-input type="password" v-model="ruleForm2.oldpass"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="pass">
							<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item label="确认密码" prop="checkPass">
							<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
							<el-button @click="resetForm('ruleForm2')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
        <!--<div class="header-nav">-->
            <!--<span class="fa fa-bell"></span>-->
            <!--<span class="fa fa-caret-down"></span>-->
        <!--</div>-->
        <!--<div class="header-nav">-->
            <!--<span class="fa fa-envelope"></span>-->
            <!--<span class="fa fa-caret-down"></span>-->
        <!--</div>-->
    </div>
</template>

<script>
    export default {
        data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm2.checkPass !== '') {
						this.$refs.ruleForm2.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm2.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			var validatePass3 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};
            return {
				mmshow: false,
                checked: false,
                isshow: false,
                name: '',
				passWord: '',
				form: {
				    name1:'',
				},
				ruleForm2: {
					pass: '',
					checkPass: '',
					oldpass: '',
				},
				rules2: {
					pass: [
						{ validator: validatePass, trigger: 'blur' }
					],
					checkPass: [
						{ validator: validatePass2, trigger: 'blur' }
					],
					oldpass: [
						{ validator: validatePass3, trigger: 'blur' }
					]
				}
            };
        },
        computed: {
            username: function () {
                return this.name
            }
        },
		created() {
			this.$http.get(
				this.h + '/employees/' + localStorage.getItem('ID'),
				{
					headers: {'Xwt-Request-Token': localStorage.getItem('TOKEN')},
				}).then((res) => {
				    this.name = res.data.data.name;
			    })
		},
        methods: {
            handleCommand: function (command) {
                if (command == 'loginout') {
                    localStorage.removeItem('TOKEN');
                    this.$router.push('/login');
                };
                if(command == 'alertmm') {
					this.mmshow = true;
				}
            },
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$http.patch(
							this.h + '/employees/' + localStorage.getItem('ID'),
							{
								oldPwd: this.ruleForm2.oldpass,
								newPwd: this.ruleForm2.checkPass,
								reNewPwd: this.ruleForm2.pass
							},
							{
								headers: {'Xwt-Request-Token': localStorage.getItem('TOKEN')}
							}).then((res) => {
                                this.$message.error(res.data.msg);
							}).catch((err) => {
                                this.$message.error('修改密码失败');
							})
						this.mmshow = false;
					} else {
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
        }
    };

</script>

<style lang="scss">
    @import url(../../common/css/font-awesome.css);
    .fir-header {
        background: #4c59ac;
        width: 100%;
        color: #ffffff;
        padding: 15px 0;
		height: 68px;
        .title {
            float: left;
            font-size: 18px;
            font-weight: bold;
            line-height: 38px;
            margin-left: 90px;
        }
        .user {
            position: relative;            
            float: right;
            font-size: 14px;
            line-height: 38px;
            color: #ffffff;
            margin-right: 50px;
            cursor: pointer;
            img {
                vertical-align: middle;
                margin-left: 10px;
            }
            .fa {
                margin-left: 14px;
            }
        }
        .el-form-item__content {
            line-height: 0;
        }
    }


    .header-nav {
        float: right;
        margin-right: 25px;
        cursor: pointer;
    }

    .header-nav .fa-caret-down {
        font-size: 0.8rem;
    }

	.header-alert {
		width:100%;
		height:100%;
		position: fixed;
		background: rgba(0,0,0,.5);
		top:0;
		z-index: 999;
        .header-title {
            background: #f7f8fc;
            border-radius: 5px 5px 0 0;
        }
        .el-icon-close {
            line-height: 28px;
        }
        .el-button {
            width: 45%;
            background: #00c583;
            border-color: #00c583;
        }
        .el-button:last-child {
            float: right;
            background: #fff;
            color: #00c583;
        }
	}
	.header-alert-bd{
		width:400px;
		height:300px;
		background: #ffffff;
		position: absolute;
		left: 50%;
		margin-left: -200px;
		top:50%;
		margin-top: -150px;
        border-radius: 5px;
	}

	.header-title {
		width: 100%;
		border-bottom: 1px solid #eeeeee;
		padding: 15px 0;
		font-size: 14px;
		text-align: center;
		position: relative;
		color: #666;
	}

	.header-title-close {
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.header-content {
		width: 95%;
		padding: 20px 5%;
	}
</style>
